<template>
  <view class="feedback-container">
    <!-- 基本信息 -->
    <view class="info-section">
      <view class="section-title">基本信息</view>
      <view class="form-items">
        <view class="form-item">
          <text class="item-label">搬运日期</text>
          <picker 
            mode="date" 
            :value="moveDate" 
            @change="onDateChange"
            :start="today"
          >
            <view class="picker-value">{{ moveDate || '请选择搬运日期' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="item-label">搬运时段</text>
          <picker 
            mode="time" 
            :value="moveTime" 
            @change="onTimeChange"
            start="09:00"
            end="18:00"
          >
            <view class="picker-value">{{ moveTime || '请选择搬运时段' }}</view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 物品描述 -->
    <view class="comment-section">
      <view class="section-title">物品描述</view>
      <textarea 
        class="comment-input"
        v-model="description"
        placeholder="请详细描述需要搬运的物品（种类、数量、体积等）"
        maxlength="500"
      ></textarea>
      <view class="word-count">{{ description.length }}/500</view>
    </view>

    <!-- 图片上传 -->
    <view class="image-section">
      <view class="section-title">图片上传</view>
      <view class="upload-tip">可上传相关图片（选填）</view>
      <view class="image-upload">
        <view 
          class="image-item" 
          v-for="(image, index) in images" 
          :key="index"
        >
          <image :src="image" mode="aspectFill"></image>
          <view class="delete-icon" @tap="deleteImage(index)">×</view>
        </view>
        <view class="upload-button" @tap="chooseImage" v-if="images.length < 4">
          <text class="plus">+</text>
          <text class="upload-text">上传图片</text>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="button-group">
      <button 
        class="submit-button" 
        @tap="submitRelease" 
        :disabled="!isFormValid"
      >
        提交申请
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      moveDate: '',
      moveTime: '',
      description: '',
      images: [],
      isAnonymous: false,
      loading: false
    }
  },

  computed: {
    today() {
      const date = new Date()
      return date.toISOString().split('T')[0]
    },
    
    isFormValid() {
      return this.moveDate && this.moveTime && this.description.trim()
    }
  },

  methods: {
    onDateChange(e) {
      this.moveDate = e.detail.value
    },

    onTimeChange(e) {
      this.moveTime = e.detail.value
    },

    chooseImage() {
      uni.chooseImage({
        count: 4 - this.images.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const validImages = res.tempFilePaths.filter((path, index) => {
            return res.tempFiles[index].size <= 5 * 1024 * 1024 // 5MB
          })
          
          if (validImages.length < res.tempFilePaths.length) {
            uni.showToast({
              title: '部分图片超过5MB，已过滤',
              icon: 'none'
            })
          }
          
          this.images = [...this.images, ...validImages]
        }
      })
    },

    deleteImage(index) {
      this.images.splice(index, 1)
    },

    onAnonymousChange(e) {
      this.isAnonymous = e.detail.value
    },

    async submitRelease() {
      if (this.loading) return
      this.loading = true

      try {
        const uploadedFiles = await this.uploadImages()

        const releaseData = {
          moveDate: this.moveDate,
          moveTime: this.moveTime,
          description: this.description,
          images: uploadedFiles
        }

        await this.$api.submitPropertyRelease(releaseData)

        uni.showToast({
          title: '申请提交成功',
          icon: 'success'
        })

        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        console.error('提交申请失败', error)
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    async uploadImages() {
      if (this.images.length === 0) return []
      
      const uploadPromises = this.images.map(image => {
        return new Promise((resolve, reject) => {
          uni.uploadFile({
            url: this.$api.baseUrl + '/upload',
            filePath: image,
            name: 'file',
            success: (res) => {
              const data = JSON.parse(res.data)
              resolve(data.url)
            },
            fail: (err) => {
              reject(err)
            }
          })
        })
      })
      
      try {
        return await Promise.all(uploadPromises)
      } catch (error) {
        console.error('上传图片失败', error)
        throw new Error('上传图片失败')
      }
    }
  }
}
</script>

<style lang="scss">
.feedback-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.info-section, .comment-section, .image-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(106, 17, 203, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #6a11cb;
}

.form-items {
  .form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .item-label {
      font-size: 28rpx;
      color: #333;
    }

    .picker-value {
      font-size: 28rpx;
      color: #666;
    }
  }
}

.comment-input {
  width: 100%;
  height: 200rpx;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.word-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.image-upload {
  display: flex;
  flex-wrap: wrap;
  
  .image-item, .upload-button {
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
    position: relative;
  }
  
  .image-item {
    image {
      width: 100%;
      height: 100%;
    }
    
    .delete-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 40rpx;
      height: 40rpx;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: center;
      line-height: 40rpx;
      font-size: 32rpx;
    }
  }
  
  .upload-button {
    border: 1px dashed #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    .plus {
      font-size: 48rpx;
      color: #999;
      line-height: 1;
      margin-bottom: 10rpx;
    }
    
    .upload-text {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.anonymous-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

.button-group {
  padding: 0 20rpx;
  margin: 40rpx 0;
}

.submit-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(135deg, #6a11cb 0%, #8e44ad 100%);
  color: #fff !important;
  border-radius: 45rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  box-shadow: 0 8rpx 20rpx rgba(106, 17, 203, 0.3);
  
  &:disabled {
    background: #cccccc;
    box-shadow: none;
  }
}

.upload-tip {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 20rpx;
}
</style>
